<template>
    <div :style="fontStyle">
        <div class="rate" @mouseout="mouseOut">
            <span @mouseover='mouseOver(num)' v-for="num in 5" :key="num">☆</span>
            <span class="hollow" :style="fontwidth">
                <span @click='onRate(num)' @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span>
        </div>
    </div>
</template>

<script setup>
// 新的需求 添加主题，不同风格的星星
import {ref , defineProps, computed, defineEmits} from 'vue'
// 自身的状态 
let props = defineProps({
    value: Number,
    theme:{ type: String, default: 'orange'}
})
let width = ref(props.value)
let fontwidth = computed(() => `width: ${width.value}em;`)

let rate = computed(()=>'★★★★★☆☆☆☆☆'.slice(5-props.value,10-props.value))

let themeObj={
    orange: '#fa541c',
    blue: '#4019ff',
    green: '#73d13d',
    balck: '#000',
    red: '#f5222d',
    yellow: '#fadb14'
}
const fontStyle = computed(()=>{
    return `color: ${themeObj[props.theme]}`
})

let emits = defineEmits(['update-rate'])

const onRate = (num) =>{
    emits('update-rate', num)
}

function mouseOver(i){
    width.value = i
}

function mouseOut(){
    width.value = props.value
}
</script>

<style>
.rate{
    position: relative;
    display: inline-block
}
.rate span{
    /* letter-spacing: 5px; */
    display: inline-block;
    width: 1rem;
    height: 22px;
    overflow: hidden;
  }
.rate > span.hollow{
    position: absolute;
    display: inline-block;
    top:0;
    left:0;
    width: 0;
    overflow: hidder;
}
</style>
